<template>
  <div class="toolbar">
    <div class="toolbar-left">
      <button class="btn primary" @click="$emit('add')">
        <FontAwesomeIcon v-if="plusIcon" :icon="plusIcon" /> 新建
      </button>
      <button class="btn" :disabled="!canResume" @click="$emit('resume')">
        <FontAwesomeIcon v-if="playIcon" :icon="playIcon" />
      </button>
      <button class="btn" :disabled="!canPause" @click="$emit('pause')">
        <FontAwesomeIcon v-if="pauseIcon" :icon="pauseIcon" />
      </button>
      <button class="btn danger" :disabled="!canRemove" @click="$emit('remove')">
        <FontAwesomeIcon v-if="trashIcon" :icon="trashIcon" />
      </button>
      <button class="btn success" @click="$emit('check-double')" :disabled="!hasItems">
        <FontAwesomeIcon v-if="checkDoubleIcon" :icon="checkDoubleIcon" />
      </button>
      <button class="btn warning" @click="$emit('toggle-sort')" :disabled="!hasItems">
        <FontAwesomeIcon v-if="upDownIcon" :icon="upDownIcon" />
      </button>
      <button class="btn info" @click="$emit('show-help')">
        <FontAwesomeIcon v-if="questionIcon" :icon="questionIcon" />
      </button>
    </div>
    <div class="toolbar-right">
      <div class="search-box">
        <input
          type="text"
          placeholder="搜索"
          :value="searchQuery"
          @input="$emit('update:searchQuery', $event.target && $event.target.value)"
        >
        <span class="search-icon">🔍</span>
      </div>
    </div>
  </div>
</template>

<script setup>
// 由父组件传入状态、图标与搜索框的 v-model
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
defineProps({
  canPause: { type: Boolean, default: false },
  canResume: { type: Boolean, default: false },
  canRemove: { type: Boolean, default: false },
  hasItems: { type: Boolean, default: false },
  searchQuery: { type: String, default: '' },
  plusIcon: { type: [Object, Array, String], default: null },
  playIcon: { type: [Object, Array, String], default: null },
  pauseIcon: { type: [Object, Array, String], default: null },
  trashIcon: { type: [Object, Array, String], default: null },
  checkDoubleIcon: { type: [Object, Array, String], default: null },
  upDownIcon: { type: [Object, Array, String], default: null },
  questionIcon: { type: [Object, Array, String], default: null }
})
</script>

<style scoped>
/* 使用项目中的配色变量，给三个功能按钮设置不同颜色 */
.btn.success { background: var(--success-color); }
.btn.success:hover { filter: brightness(1.05); }

.btn.warning { background: var(--warning-color); }
.btn.warning:hover { filter: brightness(1.05); }

/* 没有 info 变量时，使用 primary 作为信息色 */
.btn.info { background: var(--primary-color); }
.btn.info:hover { filter: brightness(1.05); }
</style>
